<template>
  <div class="cart">
    <div class="cart-head">
      <div class="cart-headleft">我的购物车<van-icon name="cart-o" /></div>
      <div class="cart-headright" @click="clearCart()">
        <van-icon name="delete-o" />清空
      </div>
    </div>
    <div
      class="cart-item"
      v-for="(cartitem, index) in cartStore.carts"
      :key="index"
    >
      <img :src="cartitem.good.image_path" alt="" />
      <div class="cart-item-content">
        <div class="cart-item-name">{{ cartitem.good.name }}</div>
        <div class="cart-item-bottom">
          <div class="cart-item-price">￥{{ cartitem.good.price }}</div>
          <CartStepper
            class="cart-item-quantity"
            :choosenItem="cartitem.good"
          ></CartStepper>
          <!-- <div class="cart-item-quantity">{{ cartitem.quantity }}</div> -->
        </div>
      </div>
    </div>
  </div>
  <van-sticky position="bottom" offset-bottom="0vw" @click="unshowCart()">
    <div class="cart-button">
      <div class="cart-content">
        <van-icon class="cart-content-icon" size="5vh" name="shopping-cart" />
        <div class="cart-content-num">
          <!-- 未选购商品 -->
          <span v-if="cartStore.totalPrice == 0">还未选购商品</span>
          <!-- 已选购商品 -->
          <span v-else>￥{{ cartStore.totalPrice }}</span>
        </div>
        <van-button class="cart-content-button" @click="sumbitCart(cartStore)"
          >提交订单</van-button
        >
      </div>
    </div>
  </van-sticky>
  <van-dialog
    v-model:show="showdiag"
    message="确定要清空购物车吗？"
    width="60vw"
    show-cancel-button
    @confirm="confirmClear()"
  ></van-dialog>
</template>
<script setup lang="ts">
import { usecartStore } from "@/store/modules/module.js";
import CartStepper from "@/components/stepper/Stepper.vue";
import { ref } from "vue";
import "vant/es/dialog/style";
import { useRouter } from "vue-router";

const cartStore = usecartStore();
const router = useRouter();
let showdiag = ref(false);
const emit = defineEmits(["unshow"]);

const unshowCart = () => {
  emit("unshow");
};

const clearCart = () => {
  showdiag.value = true;
};

const confirmClear = () => {
  cartStore.clearCart();
};

const sumbitCart = (cartStore: any) => {
  router.push({ path: "/order", params: { data: cartStore } });
};
</script>
<style lang="less" scoped>
.cart {
  background-color: #f7f7f7;
  height: 34vh;
  overflow: auto;
  .cart-item {
    background-color: #ffffff;
    border-radius: 3vw;
    padding: 2vw 2vw;
    margin-left: 3vw;
    margin-right: 3vw;
    margin-top: 2vw;
    display: flex;
    img {
      width: 25vw;
    }
    .cart-item-content {
      width: 70vw;
      padding-left: 3vw;
      .cart-item-name {
        font-size: 4vw;
        font-weight: 350;
      }
      .cart-item-bottom {
        margin-top: 2vh;
        display: flex;
        .cart-item-price {
          color: #e93e3e;
          font-size: 4vw;
          margin-right: auto;
        }
        .cart-item-quantity {
          display: flex;
          align-items: center;
          margin-left: auto;
          width: 20vw;
        }
      }
    }
  }
  .cart-head {
    width: 100vw;
    height: 3vh;
    display: flex;
    justify-content: space-between;
    .cart-headleft {
      font-size: 4vw;
      font-weight: 400;
      margin-left: 4vw;
      margin-top: 1vw;
      margin-right: auto; /* 将headleft向左推，与head的右边缘对齐 */
    }
    .cart-headright {
      font-size: 4vw;
      font-weight: 400;
      margin-right: 4vw;
      margin-top: 1vw;
      margin-left: auto; /* 将headright向右推，与head的左边缘对齐 */
    }
  }
}
// 沿用Good页面的样式
.cart-button {
  overflow-y: hidden;
  background-color: #f7f7f7;
  .cart-content {
    display: grid;
    grid-template-columns: 20% 50% 30%;
    grid-template-areas: "icon num button";
    align-items: center;
    width: 100vw;
    height: 6vh;
    background-color: #d81919;
    border-radius: 5vw;
    overflow-y: hidden;
    .cart-content-icon {
      left: 3vw;
      grid-area: icon;
      justify-self: start;
      height: 5vh;
      width: 10vw;
      color: #fcb309;
    }
    .cart-content-num {
      text-align: left;
      grid-area: num;
      font-size: 5vw;
      color: #f7f7f7;
    }
    .cart-content-button {
      grid-area: button;
      justify-self: end;
      background-color: #fcb309;
      font-weight: 500;
      border-radius: 5vw;
      width: 30vw;
      height: 6vh;
      font-size: 4vw;
    }
  }
  van-sticky {
    z-index: 9999;
  }
}
.van-dialog__message {
  font-size: 10vw !important;
}
</style>
